<template>
  <div class="ab">
    <div class="btn">
      <el-input
          class="search"
          placeholder="文件名"
          prefix-icon="el-icon-search"
          v-model="keywords"
      />
    </div>

    <el-table :data="search(keywords)" style="width: 100%" max-height="350">
      <el-table-column prop="dname" label="文件名" width="420" />
      <el-table-column prop="dsize" label="文件大小" width="400" />
      <el-table-column prop="ctime" label="创建日期" width="500" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-link
              type="primary"
              style="font-size:5px"
              :href="`/ky/user/download?dname=${search(keywords)[scope.$index].dname}`"
          >
            <i class="el-icon-download"></i>
          </el-link>
          <el-button
              @click="deleteRow(scope.$index, scope.row)"
              type="text"
              size="small"
          >
            <i class="el-icon-delete"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <span class="demonstration">分页选择</span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filetotal"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import {
  ElInput,
  ElTable,
  ElTableColumn,
  ElLink,
  ElButton,
  ElPagination,
  ElMessage,
  ElMessageBox,
} from 'element-plus';

const keywords = ref('');
const fileList = ref([]);
const currentPage = ref(1);
const pagesize = ref(10);
const filetotal = ref(0);
const url1 = ref('/ky/admin/files?currentPage=');

const deleteRow = async (index, data) => {
  await ElMessageBox.confirm(
      '此操作将永久删除该文件, 是否继续?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        try {
          const result = await axios.get(`/ky/admin/delFile?id=${data.id}`);
          if (result.data.message) {
            ElMessage.success(result.data.message);
            await querydata(currentPage.value);
          }
        } catch (error) {
          console.error('删除文件出错:', error);
        }
      })
      .catch(() => {
        ElMessage.info('已取消删除');
      });
};

const search = (keywords) => {
  return fileList.value.filter((item) =>
      item.dname.includes(keywords)
  );
};

const handleSizeChange = (val) => {
  pagesize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  querydata(val);
};

const querydata = async (currentPage) => {
  try {
    const result = await axios.get(`${url1.value}${currentPage}`);
    fileList.value = result.data.data.list;
    filetotal.value = result.data.data.total;
  } catch (error) {
    console.error('请求数据出错:', error);
  }
};

onMounted(() => {
  querydata(currentPage.value);
});
</script>

<style scoped>
.btn {
  width: 100%;
  background-color: #fff;
}
.search {
  width: 300px;
  margin-left: 100px;
  margin-top: 10px;
}
</style>